{% extends 'layouts/base.html' %}
{% block content %}
<link rel="stylesheet" href="{{config['application']['site']['assetsUri']}}order/style.css" />
<style>
label.error {
    margin-left:20px;
    color: red;
    float: none;
}
</style>
<!-- PAGE CONTENT BEGINS -->
<div class="container">
    <!--  <div class="title"><h3>创建订单</h1></div>    -->     
    <form action="{{ url('backend/order/add') }}" method="post" class="form-horizontal">
        <div class="row-fluid">
            <div class="">
                <div class="control-group">
                    <label class="help-inline tip-label">选择业务：</label>
                    <div class="help-inline">
                        <select class="middle-select" name="carry_type">
                            {% for v in service %}
                            <option value="{{v.ser_id}}">{{v.ser_name}}</option>
                            {%endfor%}
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="">
                <div class="control-group">
                    <label class="help-inline tip-label">客户类型：</label>
                    <label class="radio-inline">
                        <input type="radio" name="client_type" id="inlineRadio1" value="C" checked="checked">个人
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="client_type" id="inlineRadio2" value="Q">企业
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="client_type" id="inlineRadio3" value="Z">政府
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="client_type" id="inlineRadio4" value="O">其他
                    </label> 
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="">
                <div class="control-group">
                    <label class="help-inline tip-label">联系人：</label>
                    <div class="help-inline">
                        <input type="text" class="span12" name="client_name" placeholder="请输入联系人">
                    </div>
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="">
                <div class="control-group">
                    <label class="help-inline tip-label">手机：</label>
                    <div class="help-inline">
                        <input type="tel" class="span12" placeholder="请输入手机" name="client_phone">
                    </div>
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="">
                <div class="control-group">
                    <label class="help-inline tip-label">出发地址：</label>
                    <div class="help-inline">
                        <input type="text" class="span12" name="start_address" placeholder="请输入出发地址">
                    </div>
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="">
                <div class="control-group">
                    <label class="help-inline tip-label">目的地址：</label>
                    <div class="help-inline">
                        <input type="text" class="span12" name="arrive_address" placeholder="请输入目的地址">
                    </div>
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <div class="">
                <div class="control-group">
                    <label class="tip-label help-inline top-place">大物品清单：</label>
                    <div class="help-inline add-box-wrap" >
                        <div class="add_option_wrap" id="items" >
                            <select class="smort-select help-inline" as="itemCate">
                                <option value="">请选择</option>
                                {% for v in itemCate %}
                                <option value="{{v.ic_id}}">{{v.ic_name}}</option>
                                {%endfor%}
                            </select>
                            <select class="smort-select help-inline" as="items" name="items_id[]">
                                <option value="" price="0.00">请选择</option>
                            </select>
                            <label class="smort-label help-inline top-place">费用：</label>
                            <label class="red-label help-inline top-place">0.00</label>
                            <label class="min-label help-inline top-place">元</label>
                        </div>
                    </div> 
                    <div class="tips_box_wrap help-inline">
                        <div>
                             <div class="help-inline top-place">
                                <button type="button" class="btn btn-success smort_add_btn" as="add">+</button>
                            </div> 
                            <label class="help-inline top-place">(注：点击添加大物品选项）</label>
                        </div>
                 
                    </div>
                    
                                      
                </div>
            </div>                
        </div> 
        
        {%  for v in type0 %}
        <div class="row-fluid">
            <div class="">
                <div class="control-group" as="surcharge">
                    <label class="tip-label help-inline">{{v.scg_name}}：</label>
                    <div class="help-inline">
                        <input style="padding:0px; padding-left:5px;" type="number" unit_price="{{v.scg_price}}" min="0" name="scg_price[]" class="smort-input" placeholder="0" value="">
                    </div>
                    <label class="help-inline">{{v.unit}}</label>  
                    <label class="smort-label help-inline top-place">费用：</label> 
                    <label class="red-label help-inline top-place">0.00</label>
                    <label class="min-label help-inline top-place">元</label> 
                    <span class="help-inline smort-font">(说明：{{v.desciption}}）</span>
                    <input name="default_value[]" value="{{v.default_value}}" type="hidden">
                    <input name="scg_id[]" value="{{v.scg_id}}" type="hidden">
                </div>
            </div>                
        </div>
        {% endfor %}

        <div class="row-fluid">
            <div class="">
                <div class="control-group">
                    <label class="tip-label help-inline">出发楼层：</label>
                    <div class="help-inline">
                        <select class="smort-select" name="scg_id[]" id="address2">
                            <option value="" price="0.00">请选择</option>
                            {% for v in type1 %}
                            <option value="{{v.scg_id}}" price="{{v.scg_price}}">{{v.scg_name}}</option>
                            {% endfor %}
                        </select>
                    </div> 
                    <label class="smort-label help-inline">费用：</label> 
                    <label class="red-label help-inline" id="address2_price">0:00</label>
                    <label class="min-label help-inline">元</label>                 
                </div>
            </div>                
        </div> 
        <div class="row-fluid">
            <div class="">
                <div class="control-group">
                    <label class="tip-label help-inline">到达楼层楼层：</label>
                    <div class="help-inline">
                        <select class="smort-select" id="address1" name="scg_id[]">
                            <option value="" price="0.00">请选择</option>
                            {% for v in type2 %}
                            <option value="{{v.scg_id}}" price="{{v.scg_price}}">{{v.scg_name}}</option>
                            {% endfor %}
                        </select>
                    </div> 
                    <label class="smort-label help-inline">费用：</label> 
                    <label class="red-label help-inline" id="address1_price">0.00</label>
                    <label class="min-label help-inline">元</label>                 
                </div>
            </div>                
        </div> 
        <div class="row-fluid">
            <div class="">
                <div class="control-group">
                    <label class="tip-label help-inline">搬家时间：</label>
                    <div class="help-inline">
                        <input type="text" class="" name="carrydate" id="carrydate">
                    </div>          
                </div>
            </div>                
        </div> 
        <div class="row-fluid">
            <div class="">
                <div class="control-group">
                    <label class="tip-label help-inline">车辆配备：</label>
                    <div class="help-inline">
                        <select class="smort-select" id="models" name="m_id">
                            <option value="0.00" price="0.00">请选择</option>
                            {% for v in models %}
                            <option value="{{v.m_id}}" price="{{v.m_fee}}">{{v.m_name}}</option>
                            {%endfor%}
                        </select>
                    </div> 
                    <label class="smort-label help-inline">费用：</label> 
                    <label class="red-label help-inline"id="models_price">0.00</label>
                    <label class="min-label help-inline">元</label>                 
                </div>
            </div>                
        </div> 
        <div class="row-fluid">
            <div class=""> 
                <div class="control-group">
                    <label class="tip-label help-inline top-place">备注：</label>
                    <div class="help-inline">
                        <textarea class="form-control middle-textarea" rows="5" name="remake" placeholder="例如备注特殊物品，具体搬家要求等"></textarea>
                    </div>
                </div>
            </div>
        </div> 
        <div class="row-fluid">
            <div class="">
                <div class="control-group">
                    <label class="tip-label help-inline">一共费用：</label>
                    <label class="red-label help-inline" as="total_price" id="total_price">0.00</label>
                    <label class="min-label help-inline">元</label>             
                </div>
            </div>                
        </div> 
        <div class="row-fluid">
            <div class="">
                <div class="control-group">
                    <label class="help-inline tip-label" id="ahfee">选择发票：</label>
                    <label class="radio-inline">
                        <input type="radio" name="is_bill" id="Radio1" value="1" checked>是
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="is_bill" id="Radio2" value="0">否
                    </label>
                    <label class="help-inline">提示：需要填写发票抬头，备注提醒用户填写后无法更改</label> 
                </div>
            </div>
        </div>  
        <div class="row-fluid">
            <div class="">
                <div class="control-group">
                    <button type="submit" class="btn btn-primary some-distance-left middle-button">创建订单</button>
                </div>
            </div>
        </div>                            
    </form>
</div>

<!-- inline scripts related to this page -->
{% endblock %}
{% block script %}
<script src="{{config['application']['site']['assetsUri']}}admin/js/jquery.validate.min.js"></script>
<script type="text/javascript">
 $(function(){
     
    //大件物品
    $(".smort_add_btn").click(function(){
  
            //列表
            var items = $("#items");
            var new_item = items.clone();
            var select =  new_item.find('select[as="itemCate"]');
            new_item.find('.red-label').text('0.00');
            new_item.find('select[as="items"]').empty().append('<option value="0" price="0.00">请选择</option>');
            set_items(select);
            items.parent().append(new_item);

            //按钮
            var div = $('<div style="margin-bottom:7px;"><div class="help-inline top-place"><button type="button" class="btn btn-danger smort_add_btn" >×</button> </div></div>');
            div.find('button').click(function(){
                var index = $(".smort_add_btn").index(this);
                $("div[id='items']").eq(index).remove();
                div.remove();
            });
            $(this).parents('.tips_box_wrap').append(div);
        
    });
    
    var select_price = function(select,price){
        select.unbind().change(function(){
            price.text($(this).find('option:selected').attr('price'));
            total_price();
        });
    };
    
    select_price($('#address2'),$('#address2_price'));
    select_price($('#address1'),$('#address1_price'));
    select_price($('#models'),$('#models_price'));
    
    var set_items = function(obj){
            obj.change(function(){
                var my = $(this);
                var ic_id = my.val();
                var items = my.siblings("select");
                var price = my.siblings(".red-label");

                price.text('0.00');
                total_price();
                if(ic_id != false){
                    $.ajax({
                        type: "post",
                        url: "{{ url('backend/order/getitems')}}",
                        data: "ic_id="+ic_id,
                        dataType:'json',
                        success: function(data){
                            var str = '<option price="0.00" value="0" >请选择</option>';
                            if(data != false){
                                for(var v in data){
                                    str += '<option price="'+data[v].price+'" value="'+data[v].item_id+'">'+data[v].item_name+'</option>'
                                }
                                
                                items.append(str);
                                select_price(items,price);
                            }else{
                                str = '<option price="0.00" value="0" >无选项</option>';
                            }
                            items.html(str);
                        }
                     });
                }else{
                    items.html('<option price="0.00" value="0" >请选择</option>');
                }
                
            });
        };

    set_items($('select[as="itemCate"]'));
    
    //附加费
     $('div[as="surcharge"]').each(function(){
        var self = $(this);
        var default_value = parseInt(self.find('input[name="default_value[]"]').val());
        var show_price = self.find('.red-label');
        var number = self.find('.smort-input');
        var unit_price = number.attr('unit_price');
        number.change(function(){
            var val  = parseInt($(this).val());
//            if(val<0){
//                $(this).val(0);
//                alert("不能小于零");
//                return false; 
//            }
            
            if(val>default_value){
               var margin = val - default_value;
               var result = margin * parseInt(unit_price);
               show_price.text(result+".00");
            }else{
                show_price.text('0.00');
            }
            total_price();
         });
     });
    
   //日期
    $('#carrydate').datetimepicker({format: 'YYYY-MM-DD HH:mm:ss'}).next().on(ace.click_event, function(){
        $(this).prev().focus();
    });
    
    //统计总格
    var total_price = function(){
        var total = 0;
        $(".red-label").each(function(){
            if($(this).attr('as') != 'total_price'){
                var self_price = parseInt($(this).text());
                total += self_price;
            }  
        });
        $('#total_price').text(total+'.00');
    }
                            
    // 手机号码验证
    jQuery.validator.addMethod("isMobile", function(value, element) {
        var length = value.length;
        var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
        return this.optional(element) || (length == 11 && mobile.test(value));
    }, "请正确填写您的手机号码");
    
    jQuery.validator.methods.compareDate = function(value, element) {
        //var startDate = jQuery(param).val() + ":00";补全yyyy-MM-dd HH:mm:ss格式
        //value = value + ":00";

        var startDate = value;
        var date1 = new Date(Date.parse(startDate.replace("-", "/")));
        var today  = new Date();
        return date1 >= today;
    };
    
    jQuery.validator.methods.maxDate = function(value, element) {
        var startDate = value;
        var date1 = new Date(Date.parse(startDate.replace("-", "/")));
            date1 = date1.getTime();
        var today  = new Date();
            today = today.getTime();
            today  += (3600000*24*7);
        return date1 <= today;
    };
    
    $( "form" ).validate({
            rules: {
                client_name: {
                        required: true,
                        maxlength:10
                },
                client_phone: {
                        required: true,
                        isMobile: true
                },
                carrydate:{
                        required: true,
                        compareDate: true,
                        maxDate : true
                },
                start_address: {
                        required: true,
                        maxlength: 50
                },
                
               arrive_address: {
                        required: true,
                        maxlength: 50
                }
            },
            messages:{
                client_name:{
                    required: '请输入您的姓名！',
                    maxlength:'长度不能超过10个字符！'
                },
                client_phone:{
                    required: '手机号码不能为空！',
                    isMobile : '请正确填写您的手机号码！'
                },
                carrydate:{
                    required: '请输入搬运日期！',
                    compareDate: "搬运日期必须大当前日期！",
                    maxDate :'搬运日期不能大于一周后！'
                },
                start_address:{
                    required: '请输入起始地！',
                    maxlength: '不能超过50个字符！'
                },
                arrive_address:{
                    required: '请输入目的地！',
                    maxlength: '不能超过50个字符！'
                }
            }
    });
    
 });
</script>
{%endblock%}
